<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易数据处理界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f7fa;
            line-height: 1.6;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 12px;
            margin-bottom: 30px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .tabs {
            display: flex;
            background: white;
            border-radius: 8px;
            padding: 5px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .tab {
            flex: 1;
            padding: 15px 20px;
            text-align: center;
            cursor: pointer;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            background: transparent;
        }

        .tab.active {
            background: #667eea;
            color: white;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .tab:hover:not(.active) {
            background: #f0f2f5;
        }

        .tab-content {
            display: none;
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .tab-content.active {
            display: block;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-group textarea {
            height: 200px;
            resize: vertical;
            font-family: 'Courier New', monospace;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn-secondary {
            background: #6c757d;
            box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
        }

        .btn-secondary:hover {
            box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
        }

        .response-area {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            min-height: 200px;
            max-height: 500px;
            overflow-y: auto;
        }

        .response-area pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            line-height: 1.4;
        }

        .status-indicator {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .status-loading {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(102, 126, 234, 0.3);
            border-radius: 50%;
            border-top-color: #667eea;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-2px);
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #6c757d;
            font-size: 0.9em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .error-message {
            background: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border: 1px solid #f5c6cb;
        }

        .success-message {
            background: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border: 1px solid #c3e6cb;
        }

        .clear-btn {
            float: right;
            background: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .clear-btn:hover {
            background: #c82333;
        }

        @media (max-width: 768px) {
            .tabs {
                flex-direction: column;
            }
            
            .container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="header">
            <h1>🗂️ 交易数据处理系统</h1>
            <p>支持HTML数据清洗、结构化验证、数据库入库的完整数据处理流程</p>
        </div>

        <!-- 统计信息区域 -->
        <div class="stats-grid" id="statsGrid">
            <div class="stat-card">
                <div class="stat-number" id="totalProjects">-</div>
                <div class="stat-label">总项目数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="totalAnnouncements">-</div>
                <div class="stat-label">总公告数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="totalBidRecords">-</div>
                <div class="stat-label">总开标记录</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="totalTransactions">-</div>
                <div class="stat-label">总成交记录</div>
            </div>
        </div>

        <!-- 功能标签页 -->
        <div class="tabs">
            <button class="tab active" onclick="switchTab('html-processing')">HTML数据处理</button>
            <button class="tab" onclick="switchTab('data-validation')">数据验证</button>
            <button class="tab" onclick="switchTab('data-saving')">数据保存</button>
            <button class="tab" onclick="switchTab('project-management')">项目管理</button>
        </div>

        <!-- HTML数据处理界面 -->
        <div id="html-processing" class="tab-content active">
            <h2>📄 HTML数据处理</h2>
            <p>输入原始HTML数据，系统将自动调用Dify工作流进行数据清洗和结构化处理</p>
            
            <form id="htmlProcessingForm">
                <div class="form-group">
                    <label for="htmlContent">HTML内容：</label>
                    <textarea id="htmlContent" name="html_content" placeholder="请输入原始HTML数据..."></textarea>
                </div>
                
                <div class="form-group">
                    <label for="sourceUrl">源URL（可选）：</label>
                    <input type="url" id="sourceUrl" name="source_url" placeholder="https://example.com/source">
                </div>
                
                <button type="submit" class="btn" id="processHtmlBtn">
                    <span class="loading" id="processHtmlLoading" style="display: none;"></span>
                    开始处理HTML数据
                </button>
            </form>
            
            <div class="response-area">
                <pre id="htmlProcessingResponse">等待处理...</pre>
            </div>
        </div>

        <!-- 数据验证界面 -->
        <div id="data-validation" class="tab-content">
            <h2>✅ 数据验证</h2>
            <p>直接验证结构化数据，不调用Dify工作流</p>
            
            <form id="dataValidationForm">
                <div class="form-group">
                    <label for="structuredData">结构化数据（JSON格式）：</label>
                    <textarea id="structuredData" name="structured_data" placeholder='{"project": {...}, "announcements": [...]}'></textarea>
                </div>
                
                <button type="submit" class="btn" id="validateDataBtn">
                    <span class="loading" id="validateDataLoading" style="display: none;"></span>
                    验证数据
                </button>
            </form>
            
            <div class="response-area">
                <pre id="dataValidationResponse">等待验证...</pre>
            </div>
        </div>

        <!-- 数据保存界面 -->
        <div id="data-saving" class="tab-content">
            <h2>💾 数据保存</h2>
            <p>保存已验证的数据到数据库</p>
            
            <form id="dataSavingForm">
                <div class="form-group">
                    <label for="validatedData">已验证数据（JSON格式）：</label>
                    <textarea id="validatedData" name="validated_data" placeholder='{"project": {...}, "announcements": [...]}'></textarea>
                </div>
                
                <button type="submit" class="btn" id="saveDataBtn">
                    <span class="loading" id="saveDataLoading" style="display: none;"></span>
                    保存到数据库
                </button>
            </form>
            
            <div class="response-area">
                <pre id="dataSavingResponse">等待保存...</pre>
            </div>
        </div>

        <!-- 项目管理界面 -->
        <div id="project-management" class="tab-content">
            <h2>📋 项目管理</h2>
            
            <!-- 搜索过滤 -->
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <div class="form-group" style="margin-bottom: 0;">
                    <label for="searchKeyword">搜索关键词：</label>
                    <input type="text" id="searchKeyword" placeholder="项目编号、名称或企业">
                </div>
                
                <div class="form-group" style="margin-bottom: 0;">
                    <label for="statusFilter">项目状态：</label>
                    <select id="statusFilter">
                        <option value="">全部状态</option>
                        <option value="planning">规划中</option>
                        <option value="tendering">招标中</option>
                        <option value="evaluation">评标中</option>
                        <option value="awarded">已中标</option>
                        <option value="completed">已完成</option>
                        <option value="cancelled">已取消</option>
                    </select>
                </div>
                
                <div class="form-group" style="margin-bottom: 0;">
                    <label for="dateFrom">开始日期：</label>
                    <input type="date" id="dateFrom">
                </div>
                
                <div class="form-group" style="margin-bottom: 0;">
                    <label for="dateTo">结束日期：</label>
                    <input type="date" id="dateTo">
                </div>
            </div>
            
            <div style="margin-bottom: 20px;">
                <button type="button" class="btn" onclick="loadProjects()">🔍 搜索项目</button>
                <button type="button" class="btn btn-secondary" onclick="clearSearch()">🗑️ 清空</button>
            </div>
            
            <!-- 项目列表 -->
            <div id="projectList">
                <p style="text-align: center; color: #6c757d; padding: 40px;">点击上方搜索按钮获取项目列表</p>
            </div>
            
            <!-- 分页控件 -->
            <div id="pagination" style="display: flex; justify-content: center; align-items: center; margin-top: 20px; gap: 10px;">
                <button class="btn btn-secondary" id="prevPage" onclick="changePage(-1)" disabled>上一页</button>
                <span id="pageInfo" style="font-weight: 600;">第 1 页，共 1 页</span>
                <button class="btn btn-secondary" id="nextPage" onclick="changePage(1)" disabled>下一页</button>
            </div>
        </div>
    </div>

    <script>
        let currentPage = 1;
        let totalPages = 1;

        // 切换标签页
        function switchTab(tabName) {
            // 隐藏所有标签内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 移除所有标签的激活状态
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的标签内容
            document.getElementById(tabName).classList.add('active');
            
            // 激活选中的标签
            event.target.classList.add('active');
        }

        // 获取统计信息
        async function loadStatistics() {
            try {
                const response = await fetch('/api/statistics/');
                const data = await response.json();
                
                if (data.success) {
                    document.getElementById('totalProjects').textContent = data.data.total_counts.projects;
                    document.getElementById('totalAnnouncements').textContent = data.data.total_counts.announcements;
                    document.getElementById('totalBidRecords').textContent = data.data.total_counts.bid_records;
                    document.getElementById('totalTransactions').textContent = data.data.total_counts.transactions;
                }
            } catch (error) {
                console.error('获取统计信息失败:', error);
            }
        }

        // 处理HTML数据
        document.getElementById('htmlProcessingForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const submitBtn = document.getElementById('processHtmlBtn');
            const loading = document.getElementById('processHtmlLoading');
            const responseArea = document.getElementById('htmlProcessingResponse');
            
            // 显示加载状态
            submitBtn.disabled = true;
            loading.style.display = 'inline-block';
            responseArea.textContent = '正在处理HTML数据，请稍候...';
            
            try {
                const response = await fetch('/api/data/process/html/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        html_content: formData.get('html_content'),
                        source_url: formData.get('source_url')
                    })
                });
                
                const data = await response.json();
                responseArea.textContent = JSON.stringify(data, null, 2);
                
                if (data.success) {
                    responseArea.style.color = '#155724';
                } else {
                    responseArea.style.color = '#721c24';
                }
                
            } catch (error) {
                responseArea.textContent = '请求失败: ' + error.message;
                responseArea.style.color = '#721c24';
            } finally {
                submitBtn.disabled = false;
                loading.style.display = 'none';
            }
        });

        // 验证数据
        document.getElementById('dataValidationForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const submitBtn = document.getElementById('validateDataBtn');
            const loading = document.getElementById('validateDataLoading');
            const responseArea = document.getElementById('dataValidationResponse');
            
            submitBtn.disabled = true;
            loading.style.display = 'inline-block';
            responseArea.textContent = '正在验证数据，请稍候...';
            
            try {
                const response = await fetch('/api/data/validate/structured/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        structured_data: JSON.parse(formData.get('structured_data'))
                    })
                });
                
                const data = await response.json();
                responseArea.textContent = JSON.stringify(data, null, 2);
                responseArea.style.color = data.success ? '#155724' : '#721c24';
                
            } catch (error) {
                responseArea.textContent = '验证失败: ' + error.message;
                responseArea.style.color = '#721c24';
            } finally {
                submitBtn.disabled = false;
                loading.style.display = 'none';
            }
        });

        // 保存数据
        document.getElementById('dataSavingForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const submitBtn = document.getElementById('saveDataBtn');
            const loading = document.getElementById('saveDataLoading');
            const responseArea = document.getElementById('dataSavingResponse');
            
            submitBtn.disabled = true;
            loading.style.display = 'inline-block';
            responseArea.textContent = '正在保存数据，请稍候...';
            
            try {
                const response = await fetch('/api/data/save/validated/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        validated_data: JSON.parse(formData.get('validated_data'))
                    })
                });
                
                const data = await response.json();
                responseArea.textContent = JSON.stringify(data, null, 2);
                responseArea.style.color = data.success ? '#155724' : '#721c24';
                
                if (data.success) {
                    // 保存成功后重新加载统计信息
                    loadStatistics();
                }
                
            } catch (error) {
                responseArea.textContent = '保存失败: ' + error.message;
                responseArea.style.color = '#721c24';
            } finally {
                submitBtn.disabled = false;
                loading.style.display = 'none';
            }
        });

        // 加载项目列表
        async function loadProjects(page = 1) {
            const searchKeyword = document.getElementById('searchKeyword').value;
            const statusFilter = document.getElementById('statusFilter').value;
            const dateFrom = document.getElementById('dateFrom').value;
            const dateTo = document.getElementById('dateTo').value;
            
            const params = new URLSearchParams({
                page: page,
                page_size: 10,
                search: searchKeyword,
                status: statusFilter,
                date_from: dateFrom,
                date_to: dateTo
            });
            
            const projectList = document.getElementById('projectList');
            projectList.innerHTML = '<div style="text-align: center; padding: 40px;"><div class="loading"></div> 正在加载项目列表...</div>';
            
            try {
                const response = await fetch('/api/projects/list/?' + params);
                const data = await response.json();
                
                if (data.success) {
                    displayProjects(data.data);
                    updatePagination(data.pagination);
                    currentPage = data.pagination.current_page;
                    totalPages = data.pagination.total_pages;
                } else {
                    projectList.innerHTML = '<div class="error-message">加载项目列表失败: ' + data.error + '</div>';
                }
                
            } catch (error) {
                projectList.innerHTML = '<div class="error-message">加载失败: ' + error.message + '</div>';
            }
        }

        // 显示项目列表
        function displayProjects(projects) {
            const projectList = document.getElementById('projectList');
            
            if (projects.length === 0) {
                projectList.innerHTML = '<p style="text-align: center; color: #6c757d; padding: 40px;">未找到符合条件的项目</p>';
                return;
            }
            
            let html = '<div style="overflow-x: auto;">';
            html += '<table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">';
            html += '<thead><tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">';
            html += '<th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">项目编号</th>';
            html += '<th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">项目名称</th>';
            html += '<th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">状态</th>';
            html += '<th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">企业</th>';
            html += '<th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">预算(万元)</th>';
            html += '<th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">投标截止</th>';
            html += '<th style="padding: 12px; text-align: left; border: 1px solid #dee2e6;">操作</th>';
            html += '</tr></thead><tbody>';
            
            projects.forEach(project => {
                const statusClass = getStatusClass(project.project_status);
                html += '<tr style="border-bottom: 1px solid #dee2e6; hover: background-color: #f8f9fa;">';
                html += '<td style="padding: 12px; border: 1px solid #dee2e6; font-family: monospace;">' + project.project_number + '</td>';
                html += '<td style="padding: 12px; border: 1px solid #dee2e6; max-width: 300px; overflow: hidden; text-overflow: ellipsis;" title="' + project.project_name + '">' + project.project_name + '</td>';
                html += '<td style="padding: 12px; border: 1px solid #dee2e6;"><span class="status-indicator ' + statusClass + '">' + project.project_status_display + '</span></td>';
                html += '<td style="padding: 12px; border: 1px solid #dee2e6; max-width: 200px; overflow: hidden; text-overflow: ellipsis;" title="' + (project.owner_company || '') + '">' + (project.owner_company || '') + '</td>';
                html += '<td style="padding: 12px; border: 1px solid #dee2e6; text-align: right;">' + (project.project_budget || '-') + '</td>';
                html += '<td style="padding: 12px; border: 1px solid #dee2e6;">' + (project.bid_deadline ? new Date(project.bid_deadline).toLocaleDateString() : '-') + '</td>';
                html += '<td style="padding: 12px; border: 1px solid #dee2e6;">';
                html += '<button class="btn" style="padding: 4px 8px; font-size: 12px;" onclick="viewProjectDetail(' + project.id + ')">查看详情</button>';
                html += '</td>';
                html += '</tr>';
            });
            
            html += '</tbody></table></div>';
            projectList.innerHTML = html;
        }

        // 获取状态样式类
        function getStatusClass(status) {
            const statusMap = {
                'planning': 'status-loading',
                'tendering': 'status-success',
                'evaluation': 'status-loading',
                'awarded': 'status-success',
                'completed': 'status-success',
                'cancelled': 'status-error'
            };
            return statusMap[status] || 'status-loading';
        }

        // 更新分页控件
        function updatePagination(pagination) {
            document.getElementById('pageInfo').textContent = `第 ${pagination.current_page} 页，共 ${pagination.total_pages} 页`;
            document.getElementById('prevPage').disabled = !pagination.has_previous;
            document.getElementById('nextPage').disabled = !pagination.has_next;
        }

        // 切换页面
        function changePage(direction) {
            const newPage = currentPage + direction;
            if (newPage >= 1 && newPage <= totalPages) {
                loadProjects(newPage);
            }
        }

        // 清空搜索
        function clearSearch() {
            document.getElementById('searchKeyword').value = '';
            document.getElementById('statusFilter').value = '';
            document.getElementById('dateFrom').value = '';
            document.getElementById('dateTo').value = '';
            currentPage = 1;
            loadProjects();
        }

        // 查看项目详情
        async function viewProjectDetail(projectId) {
            try {
                const response = await fetch(`/api/projects/${projectId}/detail/`);
                const data = await response.json();
                
                if (data.success) {
                    const project = data.data;
                    let detailHtml = '<div style="background: white; padding: 20px; border-radius: 8px;">';
                    detailHtml += '<h3>项目详情 - ' + project.project_number + '</h3>';
                    detailHtml += '<p><strong>项目名称:</strong> ' + project.project_name + '</p>';
                    detailHtml += '<p><strong>状态:</strong> <span class="status-indicator ' + getStatusClass(project.project_status) + '">' + project.project_status_display + '</span></p>';
                    detailHtml += '<p><strong>企业:</strong> ' + (project.owner_company || '-') + '</p>';
                    detailHtml += '<p><strong>预算:</strong> ' + (project.project_budget || '-') + ' 万元</p>';
                    detailHtml += '<p><strong>地区:</strong> ' + (project.region || '-') + '</p>';
                    detailHtml += '<p><strong>行业:</strong> ' + (project.industry || '-') + '</p>';
                    
                    if (project.announcements && project.announcements.length > 0) {
                        detailHtml += '<h4>相关公告 (' + project.announcements.length + ')</h4>';
                        project.announcements.forEach(ann => {
                            detailHtml += '<div style="border: 1px solid #dee2e6; padding: 10px; margin: 5px 0; border-radius: 4px;">';
                            detailHtml += '<strong>' + ann.announcement_title + '</strong><br>';
                            detailHtml += '编号: ' + (ann.announcement_number || '-') + '<br>';
                            detailHtml += '发布日期: ' + (ann.publish_date ? new Date(ann.publish_date).toLocaleDateString() : '-');
                            detailHtml += '</div>';
                        });
                    }
                    
                    detailHtml += '</div>';
                    
                    // 显示详情（这里可以改为模态框或其他方式）
                    alert('项目详情已准备好，请查看控制台或实现模态框显示');
                    console.log('项目详情:', project);
                    
                } else {
                    alert('获取项目详情失败: ' + data.error);
                }
                
            } catch (error) {
                alert('获取项目详情失败: ' + error.message);
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载统计信息
            loadStatistics();
            
            // 默认加载项目列表
            loadProjects();
            
            // 添加工具提示
            document.querySelectorAll('[title]').forEach(element => {
                element.addEventListener('mouseenter', function() {
                    const title = this.getAttribute('title');
                    this.setAttribute('data-tooltip', title);
                    this.removeAttribute('title');
                });
            });
        });
    </script>
</body>
</html>